Link Component এবং Programmatic Navigation গাইড ও নোট

Next.js এ পেজ নেভিগেশন পরিচালনা করতে Link কম্পোনেন্ট এবং Programmatic Navigation ব্যবহৃত হয়। Link কম্পোনেন্ট পেজের মধ্যে সহজভাবে নেভিগেট করতে সাহায্য করে এবং Programmatic Navigation দ্বারা কোডের মাধ্যমে রাউট পরিবর্তন করা সম্ভব হয়। এটি আপনার অ্যাপ্লিকেশনকে দ্রুত এবং ব্যবহারকারী-বান্ধব করে তোলে।

এখানে Next.js Link Component এবং Programmatic Navigation এর ব্যবহার সম্পর্কে বিস্তারিত আলোচনা করা হলো।

১. Link Component ব্যবহার করা

Next.js এর Link কম্পোনেন্ট, React Router বা অন্যান্য নেভিগেশন পদ্ধতির মতো কাজ করে, তবে এটি পেজ রেন্ডারিংকে আরও দ্রুত এবং কার্যকরীভাবে করে তোলে। এটি ক্লায়েন্ট-সাইড নেভিগেশন সমর্থন করে, যা অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ায়।

Link কম্পোনেন্টের মাধ্যমে আপনি URL রাউটগুলো সংযুক্ত করতে পারেন, এবং এটি অপ্রয়োজনীয় পেজ রিফ্রেশ ছাড়া অ্যাপ্লিকেশন পেজ পরিবর্তন করে।

উদাহরণ:

import Link from 'next/link'

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
    </div>
  )
}

এখানে Link কম্পোনেন্টের href প্রপ এর মাধ্যমে পেজ রাউট নির্ধারণ করা হয়েছে। ব্যবহারকারী যখন Go to About Page লিঙ্কটিতে ক্লিক করবেন, তখন এটি /about রাউটে নিয়ে যাবে।

মনে রাখবেন: Next.js 13 থেকে, <a> ট্যাগ ব্যবহার করা বাধ্যতামূলক নয় যদি না আপনি অ্যাঙ্কর ট্যাগের মতো কোনো অতিরিক্ত স্টাইল বা আচরণ চান।

২. Link কম্পোনেন্টের অন্যান্য অপশন

Next.js এর Link কম্পোনেন্টে কিছু অতিরিক্ত প্রপস রয়েছে যা বিভিন্ন পরিস্থিতিতে সহায়ক হতে পারে।

passHref:

যখন আপনি <a> ট্যাগ ব্যবহার করেন, তখন passHref প্রপটি ব্যবহার করা উচিত। এটি স্বয়ংক্রিয়ভাবে <a> ট্যাগকে href প্রপ পাঠিয়ে দেয়।

<Link href="/about" passHref>
  <a>Go to About Page</a>
</Link>

replace:

replace প্রপটি ব্যবহার করলে, নতুন পেজটি ব্রাউজারের ইতিহাসের স্ট্যাকের মধ্যে যুক্ত হবে না। এর মানে হল যে "ব্যাক" বাটনে ক্লিক করলে ব্যবহারকারী পূর্ববর্তী পেজে ফিরে যেতে পারবেন না।

<Link href="/about" replace>
  <a>Go to About Page</a>
</Link>

৩. Programmatic Navigation (কোডের মাধ্যমে রাউট পরিবর্তন)

Next.js আপনাকে কোডের মাধ্যমে রাউট পরিবর্তন করতে সাহায্য করার জন্য useRouter হুক প্রদান করে। এই হুকটি ব্যবহার করে আপনি পেজের মধ্যে প্রোগ্রাম্যাটিকভাবে নেভিগেট করতে পারেন।

useRouter হুকের মাধ্যমে রাউটিং, প্যারামিটার ফেচিং, এবং অন্যান্য নেভিগেশন অ্যাকশন করা যায়।

উদাহরণ:

import { useRouter } from 'next/router'

export default function NavigateButton() {
  const router = useRouter()

  const handleNavigation = () => {
    router.push('/about')
  }

  return (
    <div>
      <button onClick={handleNavigation}>Go to About Page</button>
    </div>
  )
}

এখানে, router.push('/about') পদ্ধতিটি ব্যবহার করে প্রোগ্রাম্যাটিকভাবে /about পেজে নেভিগেট করা হচ্ছে।

৪. router.push এবং router.replace

• router.push: এটি পেজ রাউট পরিবর্তন করে এবং ব্রাউজারের ইতিহাসে নতুন পেজটি যুক্ত করে।
• router.replace: এটি পেজ রাউট পরিবর্তন করে তবে ব্রাউজারের ইতিহাসে নতুন পেজটি যুক্ত হয় না, অর্থাৎ "ব্যাক" বাটনে ক্লিক করলে আগের পেজে ফিরে আসা যাবে না।

উদাহরণ:

import { useRouter } from 'next/router'

export default function PageNavigation() {
  const router = useRouter()

  const navigateWithPush = () => {
    router.push('/contact') // ইতিহাসে নতুন রাউট যোগ হবে
  }

  const navigateWithReplace = () => {
    router.replace('/contact') // ইতিহাসে নতুন রাউট যোগ হবে না
  }

  return (
    <div>
      <button onClick={navigateWithPush}>Go to Contact Page (push)</button>
      <button onClick={navigateWithReplace}>Go to Contact Page (replace)</button>
    </div>
  )
}

৫. Query Parameters সহ রাউটিং

আপনি যদি ডাইনামিক কনটেন্টের জন্য প্যারামিটার সহ রাউট করতে চান, তবে router.push বা Link কম্পোনেন্টে প্যারামিটার দিতে পারেন।

উদাহরণ:

import { useRouter } from 'next/router'

export default function ProductPage() {
  const router = useRouter()

  const navigateToProduct = (productId) => {
    router.push(`/product/${productId}`)
  }

  return (
    <div>
      <button onClick={() => navigateToProduct(1)}>Go to Product 1</button>
      <button onClick={() => navigateToProduct(2)}>Go to Product 2</button>
    </div>
  )
}

এখানে, /product/[id] রাউটটি ব্যবহারকারীর পণ্য আইডি অনুযায়ী নেভিগেট করবে।

সারাংশ

Next.js এর Link কম্পোনেন্ট এবং Programmatic Navigation আপনার অ্যাপ্লিকেশনের নেভিগেশনকে সহজ এবং দক্ষ করে তোলে। Link কম্পোনেন্ট দিয়ে আপনি সহজে পেজের মধ্যে নেভিগেট করতে পারেন, এবং useRouter হুক ব্যবহার করে কোডের মাধ্যমে রাউট পরিবর্তন করতে পারেন। আপনি চাইলে ডাইনামিক রাউট, প্যারামিটার, এবং অতিরিক্ত অপশন যেমন replace এবং passHref ব্যবহার করে নেভিগেশন কাস্টমাইজ করতে পারেন।